<template>
	<view>
        <wlk-sticky  :scrollTop="scrollTop" :offsetTop="offsetTop" :borderHeight="borderHeight" :enable="item.params.mode=='fixed'?true:false">
            <view class="search-box relative" :style="'background-color: '+item.style.bgColor">
                <u-search :bgColor="item.style.innerBgColor"
                          :color="item.style.titleColor"
                          :searchIconColor="item.style.searchIconColor"
                          :placeholderColor="item.style.placeholderColor"
                          :placeholder="item.params.title" disabled :showAction="false"
                          :shape="item.params.shape"
                          :height="item.style.height"
                          :inputAlign="item.params.titlePosition"
                ></u-search>
              <view class="search-jump" :style="{height:item.style.height+'px'}" @click="jump('/pages/line/search')"></view>
            </view>
        </wlk-sticky>
	</view>
</template>

<script>
    import { toUrl,pxToRpx } from '@/wlkutils/tools';
	export default {
		name:"wlk-search",
		data() {
			return {
                systemInfo : uni.getSystemInfoSync(),
                offsetTop:0
			};
		},
        //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return []
                }
            },
            scrollTop:{
                type:Number,
                default:0,
                required: true,
            },
            borderHeight:{
                type:Number,
                default:0,
            },
        },
        created:function(e){
            this.offsetTop =pxToRpx( this.systemInfo.statusBarHeight + 44 );
        },
        methods: {
            doneWaterFall(height){
                if(height>0){
                    this.$emit('doneWaterFall',height)
                }
            },
            jump(path){
                toUrl(path);
            }
        },

	}
</script>

<style lang="scss" scoped>
    .search-box{
        padding: 10rpx 20rpx;
      .search-jump{
        position: absolute;
        z-index: 99;
        width: 92%;
        top: 10rpx;
        left: 4%;
        border-radius: 40rpx;
      }
    }
</style>